@extends('layouts.'.getTheme())
@section('css')
<link href="{{asset(getThemeAssets('dataTables/datatables.min.css', true))}}" rel="stylesheet">
<link href="{{asset(getThemeAssets('css/coring.css'))}}" rel="stylesheet">
<link href="{{asset(getThemeAssets('css/toastr.min.css'))}}" rel="stylesheet">
<style type="text/css">
	.col-lg-3{
        margin-left: 0px;
        margin-right: 0px;
    }
</style>
@endsection
@section('content')
<div class="row wrapper border-bottom white-bg page-heading">
  <div class="col-lg-10">
    <h2>{!!trans('coring.title')!!}</h2>
    <ol class="breadcrumb">
        <li>
            <a href="{{url('admin')}}">{!!trans('home.title')!!}</a>
        </li>
        <li class="active">
            <strong>{!!trans('coring.title')!!}</strong>
        </li>
    </ol>
  </div>
  <div class="col-lg-2">
    <div class="title-action">

    </div>
  </div>
</div>
<div class="wrapper wrapper-content animaed" style="padding-bottom: 0px;">
<div class="row">
    <div class="col-lg-12">
        <div class="ibox-title">
          <h5>{!!trans('coring.extraplace')!!}</h5>
          <div class="ibox-tools">
            <a class="collapse-link">
              <i class="fa fa-chevron-up"></i>
            </a>
            <a class="close-link">
                <i class="fa fa-times"></i>
            </a>
          </div>
        </div>
        <div class="ibox-content" style="height:80px;">
                <form class="form-horizontal" role="form">
                            <div class="col-lg-4">
                                <label class="col-lg-1 control-label" for="Shop">市</label>
                                <div class="col-lg-11">
                                    <select class="form-control" name="" id="city">
                                        <!-- <option class="selected" id="city"></option> -->
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <label class="col-lg-1 control-label" for="Part">县(区)</label>
                                <div class="col-lg-11">
                                    <select class="form-control" name="" id="county">
                                        <!-- <option class="selected" id="county"></option> -->
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <label class="col-lg-1 control-label" for="Room">乡(镇)</label>
                                <div class="col-lg-11">
                                    <select class="form-control" name="" id="town">
                                    <!-- <option class="selected" id=""></option> -->
                                    </select>
                                </div>
                            </div>
                </form>
        </div>
  </div>
</div>
</div>
<!-- ajax实时测点值信息获取 -->
<div class="wrapper wrapper-content animaed">
  <div class="row">
    <div class="col-lg-12">
        <div class="ibox-title">
          <h5>{!!trans('coring.alltime_rivers')!!}</h5>
          <div class="ibox-tools">
            <a class="collapse-link">
              <i class="fa fa-chevron-up"></i>
            </a>
            <a class="close-link">
                <i class="fa fa-times"></i>
            </a>
          </div>
        </div>  
        <div class="ibox-content">
            <div class="alert alert-info fade in">
                <button type="button" class="close" data-dismiss="alert">
                    <span aria-hidden="true">&times;</span>
                </button>
                当前管理用户负责的所有河道数据信息。颜色变红即为报警状态！！3s刷新一次，或者点击手动刷新。
            </div>
            <button onclick="alltimedata()" class="btn btn-primary">点击刷新</button>
            <div class="realtime-box" id="realtime-box">  
            </div>        
        </div>      
    </div>
  </div>
</div>
<div class="wrapper wrapper-content animated">
  <div class="row">
    <div class="col-lg-12">
    </div>
  </div>
</div>
@endsection
@section('js')
  <script src="{{asset(getThemeAssets('dataTables/datatables.min.js', true))}}"></script>
  <script src="{{asset(getThemeAssets('layer/layer.js', true))}}"></script>
  <script src="{{asset(getThemeAssets('js/toastr.min.js'))}}"></script>
  <script type="text/javascript">
    $(document).on('click','.destroy_item',function() {
      var _item = $(this);
      var title = "{{trans('common.deleteTitle').trans('user.slug')}}？";
      layer.confirm(title, {
        btn: ['{{trans('common.yes')}}', '{{trans('common.no')}}'],
        icon: 5
      },function(index){
        _item.children('form').submit();
        layer.close(index);
      });
    });
  </script>
    <script>
        $(document).ready(function() {
            $(function () {
                // 定时刷新
                setTimeout(function() {
                    alltimeinfo();
                    // riversinfo();
                },
                0);
                setTimeout(function() {
                    // alltimeinfo();
                    riversinfo();
                },
                500);
                setInterval(function () {
                      alltimeinfo();
                },
                3000);

                // 利用ajax动态加载当前用户管理河道信息
                function riversinfo() {
                    $.ajax({
                        url: "{{url ('/admin/coring/getmanagerrivers')}}",
                        data: {},
                        type: 'get',
                        datatype: 'json',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                        },
                        success: function (data) {
                            // 对市option进行填充
                            for (var i=0;i<data['original']['city'].length;i++) {
                                $('#city').append('<option>'+ data['original']['city'][i]+'</option>');
                            }
                            // 对县（区）option进行填充
                            for (var i=0;i<data['original']['county'].length;i++) {
                                $('#county').append('<option>'+ data['original']['county'][i]+'</option>');
                            }
                            // 对乡(镇)option进行填充
                            for (var i=0;i<data['original']['town'].length;i++) {
                                $('#town').append('<option>'+ data['original']['town'][i]+'</option>');
                            }
                            setTimeout(function() {
                                toastr.options = {
                                    closeButton: true,
                                    progressBar: true,
                                    showMethod: 'slideDown',
                                    timeOut: 5000
                                };
                                toastr.success('当前登录用户所管辖的位置信息可进行下拉查看</br>下属管理河道数目为：'+data['original']['amount']);

                                }, 100);
                            
                        }
                    });
                }

                function alltimeinfo() {
                    $.ajax({
                    url: "{{url('/admin/coring/alltimeinfo')}}",
                    data: {},
                    method: 'GET',
                    async: true,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                    },
                    success: function (data) {
                        var finalarr = data;
                        // var finalarr = eval("(" + data + ")");
                        var html = "";
                        $(".realtime-box").html(html);
                        for (var i = 0; i < finalarr.length; i++) {
                            //填充属性
                            var river_name = finalarr[i].river_name;
                            var river_id = finalarr[i].river_id;
                            var town_name = finalarr[i].town_name;
                            var temp = finalarr[i].temp;
                            var height_status;
                            if(finalarr[i].height == 1) {
                                height_status = '<p style="color:red;">水位越线!!!</p>';
                            }else {
                                height_status = '正常';
                            }
                            var ph_status;
                            if(finalarr[i].ph == 1) {
                                ph_status = '<p style="color:red;">ph值异常，过低!!!</p>';
                            }else{
                                ph_status = '正常';
                            }
                            var turbidity_status;
                            if(finalarr[i].turbidity == 1) {
                                turbidity_status = '<p style="color:red;">浊度过高!!!</p>';
                            }else {
                                turbidity_status = '正常';
                            }
                            var status = function (status) {
                                switch (status) {
                                    case 0:
                                        return {'statusClass': 'tag-error', 'status': '未监测'};
                                    case 1:
                                        return {'statusClass': 'tag-default', 'status': '<p style="color:#6fc323;">监测中</p>'};
                                    case 2:
                                        return {'statusClass': 'tag-warning', 'status': '报警'};
                                }
                            };
                            var temp = finalarr[i].temp;
                            var temp_status = function (status) {
                                    return "<p style='color:#6fc323;'>" + temp + "℃</p><br>";
                            }
                            var location = finalarr[i].location;
                            //填充模板
                            html += "<div class='realtime-item'>"
                                + "<div class=\"monitor-tag " + status(finalarr[i].status).statusClass + "\"></div>"
                                + "<div class='monitor-body'>"
                                + "<h4>" + river_name + "</h4>"
                                + "<div>"
                                + "<label>当前状态：</label>"
                                + "<p>" + status(finalarr[i].status).status + "</p><br>"
                                + "<label>归属：</label>"
                                + "<p>" + town_name + " 乡(镇)</p><br>"
                                + "<label>实时温度：</label>"
                                + temp_status(finalarr[i].temp)
                                // + "<p>" + cable_temp + "℃</p><br>"      
                                + "<label >水位高度检测：</label>"
                                + "<p  style='color:#6fc323'>" + height_status+ "</p><br>"
                                + "<label>ph值检测：</label>"
                                + "<p  style='color:#6fc323'>" + ph_status + "</p><br>"   
                                + "<label>浊度检测：</label>"
                                + "<p  style='color:#6fc323'>" + turbidity_status + "</p><br>"                     
                                + "</div>"
                                + "</div></div>";
                        }
                        $(".realtime-box").html(html)
                    }
                });
                }
            });          
      });
    </script>
  <!-- {!! $html->scripts() !!} -->
@endsection
